<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRouterPush } from '@/hooks/common/router';
import SvgIcon from '@/components/custom/svg-icon.vue';

defineOptions({ name: 'ClientNav' });

interface NavItem {
  key: string;
  label: string;
  path: string;
  icon: string;
}

const navItems: NavItem[] = [
  {
    key: 'home',
    label: '首页',
    path: '/client/home'
  },
  {
    key: 'function',
    label: '测试页面',
    path: '/client/function/test',
    icon: 'mdi:test-tube'
  },
  {
    key: 'message',
    label: '消息',
    path: '/client/message',
    icon: 'mdi:message'
  },
  {
    key: 'help',
    label: '帮助',
    path: '/client/help',
    icon: 'mdi:help-circle'
  }
];

const route = useRoute();
const { routerPush } = useRouterPush();

function isActive(path: string): boolean {
  return route.path === path || route.path.startsWith(`${path}/`);
}

function handleNav(path: string) {
  routerPush(path);
}
</script>

<template>
  <div class="flex-y-center gap-24px">
    <div
      v-for="item in navItems"
      :key="item.key"
      class="cursor-pointer px-3 py-2 rounded transition-all flex-y-center gap-1"
      :class="{ 'text-primary bg-primary/8': isActive(item.path), 'hover:bg-gray-100 dark:hover:bg-gray-800': !isActive(item.path) }"
      @click="handleNav(item.path)"
    >
      <SvgIcon :icon="item.icon" class="text-16px" />
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<style scoped></style> 